<template>
  <div class="ranking-container">
    <!-- 查询项目区域 -->
    <div class="search-section">
      <input 
        v-model="searchProjectId" 
        class="search-input" 
        placeholder="输入项目ID进行查询"
        @keyup.enter="loadProject"
      >
      <button 
        class="search-btn" 
        @click="loadProject"
        :disabled="loading"
      >
        <i class="fas fa-search mr-2"></i>查询项目
      </button>
    </div>
    
    <div class="header">
      <div class="header-info">
        <div class="header-title">{{ projectId }}</div>
        <div class="header-text">
          <div class="header-h1">评分管理系统</div>
          <div class="header-p">管理人员评分录入与计算结果</div>
        </div>
      </div>
      <div class="project-id">
        <div class="project-id-icon"><i class="fas fa-hashtag"></i></div>
        <div class="project-id-text">项目ID: {{ projectId }}</div>
      </div>
    </div>
    
    <div class="container">
      <!-- 加载指示器 -->
      <div v-if="loading" class="loading-indicator">
        <div class="spinner"></div>
      </div>
      
      <div v-else>
        <!-- 项目信息 -->
        <div class="card">
          <div class="card-title">
            <div>
              <div class="card-icon" style="background: rgba(79, 70, 229, 0.15); color: #4f46e5;">
                <i class="fas fa-info-circle"></i>
              </div>
              <div class="card-title-text">项目信息</div>
            </div>
            <div>
              <div class="project-id">
                <div class="project-id-icon"><i class="fas fa-vote-yea"></i></div>
                <div class="project-id-text">投票ID: {{ voteId }}</div>
              </div>
            </div>
          </div>
          
          <div class="input-group">
            <div class="input-label">
              <i class="fas fa-project-diagram"></i>
              <div>项目名称</div>
            </div>
            <input 
              v-model="projectName" 
              type="text" 
              class="input-field"
              placeholder="请输入项目名称"
              :disabled="submitting"
            >
          </div>
          
          <div class="input-group">
            <div class="input-label">
              <i class="fas fa-tags"></i>
              <div>所属类别</div>
            </div>
            <select v-model="selectedCategory" class="input-field" :disabled="submitting">
              <option v-for="category in categories" :key="category.id" :value="category.id">
                {{ category.name }}
              </option>
            </select>
          </div>
          
          <div class="input-group" v-if="projectMembers">
            <div class="input-label">
              <i class="fas fa-users"></i>
              <div>项目成员</div>
            </div>
            <input 
              v-model="projectMembers" 
              type="text" 
              class="input-field"
              placeholder="请输入项目成员"
              :disabled="submitting"
            >
          </div>
          
          <div class="input-group" v-if="projectDescription">
            <div class="input-label">
              <i class="fas fa-file-alt"></i>
              <div>项目描述</div>
            </div>
            <textarea 
              v-model="projectDescription" 
              class="input-field"
              placeholder="请输入项目描述"
              :disabled="submitting"
              rows="3"
            ></textarea>
          </div>
        </div>

        <!-- 评委评分 -->
        <div class="card">
          <div class="card-title">
            <div>
              <div class="card-icon" style="background: rgba(245, 158, 11, 0.15); color: #f59e0b;">
                <i class="fas fa-star"></i>
              </div>
              <div class="card-title-text">评委评分 (10分制)</div>
            </div>
            <button class="add-btn" @click="openAddJudgeModal" :loading="submitting">
              <div class="add-btn-text">
                <i class="fas fa-plus"></i>
                添加评委
              </div>
            </button>
          </div>
          
          <div class="judge-container">
            <div v-for="(judge, index) in judges" :key="judge.id" class="judge-item">
              <div class="judge-actions">
                <div class="action-btn edit-btn" @click="openEditJudgeModal(index)">
                  <i class="fas fa-edit"></i>
                </div>
                <div class="action-btn delete-btn" @click="removeJudge(index)">
                  <i class="fas fa-trash"></i>
                </div>
              </div>
              
              <div class="judge-header">
                <div class="judge-name">
                  <i class="fas fa-user"></i>
                  <div>{{ judge.name }}</div>
                </div>
                <div class="judge-weight">权重: {{ judge.weight }}%</div>
              </div>
              
              <div class="score-input-container">
                <input 
                  type="number"
                  v-model.number="judge.score"
                  min="0"
                  max="10"
                  step="0.1"
                  class="input-field"
                  placeholder="输入评分 (0-10)"
                  :disabled="submitting"
                >
                
                <div class="score-badge" :class="getScoreClass(judge.score)">
                  <div>{{ getScoreLevel(judge.score) }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="input-group" style="margin-top: 20px;">
            <div class="result-card" style="text-align: center; background: #e0e7ff;">
              <div class="result-label">评委平均分 (10分制)</div>
              <div class="result-value">{{ judgeAverageScore.toFixed(1) }}</div>
            </div>
          </div>
        </div>

        <!-- 票数统计 -->
        <div class="card">
          <div class="card-title">
            <div>
              <div class="card-icon" style="background: rgba(59, 130, 246, 0.15); color: #3b82f6;">
                <i class="fas fa-poll"></i>
              </div>
              <div class="card-title-text">票数统计</div>
            </div>
          </div>
          
          <div class="vote-container">
            <!-- 场内投票 -->
            <div class="vote-card">
              <div class="vote-header">
                <div class="vote-icon" style="background: rgba(59, 130, 246, 0.15); color: #3b82f6;">
                  <i class="fas fa-users"></i>
                </div>
                <div class="judge-name">
                  <div>场内投票</div>
                </div>
              </div>
              
              <div class="vote-stats">
                <div>
                  <div class="input-label">
                    <div>有效票数</div>
                  </div>
                  <input 
                    v-model="inPersonVotes"
                    type="number"
                    class="input-field"
                    :disabled="submitting"
                  >
                </div>
                
                <div>
                  <div class="input-label">
                    <div>总票数</div>
                  </div>
                  <input 
                    v-model="inPersonTotalVotes"
                    type="number"
                    class="input-field"
                    :disabled="submitting"
                  >
                </div>
              </div>
              
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <div class="text-gray-600">场内得票率:</div>
                  <div class="font-medium text-blue-500">{{ inPersonVoteRate.toFixed(1) }}%</div>
                </div>
                <div class="vote-progress">
                  <div class="vote-progress-inner bg-gradient-to-r from-blue-400 to-blue-600" 
                    :style="{ width: inPersonVoteRate + '%' }"></div>
                </div>
              </div>
            </div>
            
            <!-- 场外投票 -->
            <div class="vote-card">
              <div class="vote-header">
                <div class="vote-icon" style="background: rgba(139, 92, 246, 0.15); color: #8b5cf6;">
                  <i class="fas fa-globe"></i>
                </div>
                <div class="judge-name">
                  <div>场外投票</div>
                </div>
              </div>
              
              <div class="vote-stats">
                <div>
                  <div class="input-label">
                    <div>有效票数</div>
                  </div>
                  <input 
                    v-model="onlineVotes"
                    type="number"
                    class="input-field"
                    :disabled="submitting"
                  >
                </div>
                
                <div>
                  <div class="input-label">
                    <div>总票数</div>
                  </div>
                  <input 
                    v-model="onlineTotalVotes"
                    type="number"
                    class="input-field"
                    :disabled="submitting"
                  >
                </div>
              </div>
              
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <div class="text-gray-600">场外得票率:</div>
                  <div class="font-medium text-purple-500">{{ onlineVoteRate.toFixed(1) }}%</div>
                </div>
                <div class="vote-progress">
                  <div class="vote-progress-inner bg-gradient-to-r from-purple-400 to-purple-600" 
                    :style="{ width: onlineVoteRate + '%' }"></div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="input-group" style="margin-top: 20px;">
            <div class="result-card" style="text-align: center; background: #e0e7ff;">
              <div class="result-label">票数综合得分 (百分制)</div>
              <div class="result-value">{{ voteScore.toFixed(1) }}</div>
            </div>
          </div>
        </div>

        <!-- 系数设置 -->
        <div class="card">
          <div class="card-title">
            <div>
              <div class="card-icon" style="background: rgba(16, 185, 129, 0.15); color: #10b981;">
                <i class="fas fa-sliders-h"></i>
              </div>
              <div class="card-title-text">评分系数设置</div>
            </div>
          </div>
          
          <div class="coefficient-container">
            <div class="input-group">
              <div class="input-label">
                <i class="fas fa-star"></i>
                <div>评委评分系数 (%)</div>
              </div>
              <input 
                type="number"
                v-model.number="judgeCoefficient"
                min="0"
                max="100"
                class="input-field"
                placeholder="60"
                :disabled="submitting"
              >
            </div>
            
            <div class="input-group">
              <div class="input-label">
                <i class="fas fa-users"></i>
                <div>场内票数系数 (%)</div>
              </div>
              <input 
                type="number"
                v-model.number="inPersonVoteCoefficient"
                min="0"
                max="100"
                class="input-field"
                placeholder="20"
                :disabled="submitting"
              >
            </div>
            
            <div class="input-group">
              <div class="input-label">
                <i class="fas fa-globe"></i>
                <div>场外票数系数 (%)</div>
              </div>
              <input 
                type="number"
                v-model.number="onlineVoteCoefficient"
                min="0"
                max="100"
                class="input-field"
                placeholder="20"
                :disabled="submitting"
              >
            </div>
          </div>
          
          <div class="input-group" style="margin-top: 20px;">
            <div class="result-card" style="background: #e0e7ff; text-align: center;">
              <div class="result-label">系数总和</div>
              <div class="result-value">{{ coefficientTotal }}%</div>
              <div class="result-weight" :class="{ 'text-green-500': coefficientTotal === 100, 'text-red-500': coefficientTotal !== 100 }">
                <i class="fas mr-1" :class="coefficientTotal === 100 ? 'fa-check-circle' : 'fa-exclamation-circle'"></i>
                {{ coefficientTotal === 100 ? '系数总和正常' : '系数总和必须等于100%' }}
              </div>
            </div>
          </div>
        </div>

        <!-- 计算结果 -->
        <div class="card">
          <div class="card-title">
            <div>
              <div class="card-icon" style="background: rgba(245, 158, 11, 0.15); color: #f59e0b;">
                <i class="fas fa-calculator"></i>
              </div>
              <div class="card-title-text">计算结果 (百分制)</div>
            </div>
          </div>
          
          <div class="result-container">
            <div class="result-card">
              <div class="result-label">
                <i class="fas fa-star text-yellow-400 mr-2"></i>评委评分加权
              </div>
              <div class="result-value">{{ Math.round((judgeAverageScore * judgeCoefficient / 10)) }}</div>
              <div class="result-weight">权重: {{ judgeCoefficient }}%</div>
            </div>
            
            <div class="result-card">
              <div class="result-label">
                <i class="fas fa-poll text-blue-400 mr-2"></i>票数评分加权
              </div>
              <div class="result-value">{{ Math.round(voteScore * (inPersonVoteCoefficient + onlineVoteCoefficient) / 100) }}</div>
              <div class="result-weight">权重: {{ (inPersonVoteCoefficient + onlineVoteCoefficient) }}%</div>
            </div>
            
            <div class="result-card final-score">
              <div class="result-label">综合得分</div>
              <div class="result-value">{{ finalScore }}</div>
              <div class="result-weight">{{ getRankEstimation(finalScore) }}</div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="btn-group">
          <button class="btn btn-reset" @click="resetForm" :disabled="submitting">
            <div class="btn-text">
              <i class="fas fa-redo mr-2"></i>重置表单
            </div>
          </button>
          <button class="btn btn-submit" :disabled="!isFormValid || submitting" @click="submitScores">
            <div class="btn-text" v-if="!submitting">
              <i class="fas fa-paper-plane mr-2"></i>提交评分
            </div>
            <div class="loader" v-else></div>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 提交成功提示 -->
    <div v-if="showSuccessMessage" class="success-toast" :class="successType">
      <i :class="successIcon" class="mr-2"></i>
      <div>{{ successMessage }}</div>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="showErrorMessage" class="error-toast">
      <i class="fas fa-exclamation-circle mr-2"></i>
      <div>{{ errorMessage }}</div>
    </div>
    
    <!-- 添加/编辑评委模态框 -->
    <div v-if="showJudgeModal" class="modal-overlay" @click.self="closeJudgeModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">
            <i class="fas fa-user-edit mr-2"></i>
            <div>{{ isEditing ? '编辑评委' : '添加新评委' }}</div>
          </div>
          <div class="close-btn" @click="closeJudgeModal">
            <i class="fas fa-times"></i>
          </div>
        </div>
        
        <div class="input-group">
          <div class="input-label">
            <i class="fas fa-user"></i>
            <div>评委姓名</div>
          </div>
          <input 
            v-model="currentJudge.name" 
            type="text" 
            class="input-field"
            placeholder="请输入评委姓名"
            :disabled="submitting"
          >
          <div v-if="nameError" class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            <div>{{ nameError }}</div>
          </div>
        </div>
        
        <div class="input-group">
          <div class="input-label">
            <i class="fas fa-percent"></i>
            <div>评委权重 (%)</div>
          </div>
          <input 
            type="number"
            v-model.number="currentJudge.weight"
            min="1"
            max="100"
            class="input-field"
            placeholder="输入权重百分比"
            :disabled="submitting"
          >
          <div v-if="weightError" class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            <div>{{ weightError }}</div>
          </div>
        </div>
        
        <div class="input-group">
          <div class="input-label">
            <i class="fas fa-star"></i>
            <div>初始评分 (0-10)</div>
          </div>
          <input 
            type="number"
            v-model.number="currentJudge.score"
            min="0"
            max="10"
            step="0.1"
            class="input-field"
            placeholder="输入初始评分"
            :disabled="submitting"
          >
          <div v-if="scoreError" class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            <div>{{ scoreError }}</div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="btn btn-reset" @click="closeJudgeModal" :disabled="submitting">
            <div class="btn-text">取消</div>
          </button>
          <button class="btn btn-submit" @click="saveJudge" :loading="submitting">
            <div class="btn-text">
              <i class="fas fa-save mr-2"></i>
              {{ isEditing ? '保存修改' : '添加评委' }}
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllProject, setProjectScore, getAllVote, getAllVoteOnline } from '@/api/score';

export default {
  name: 'ScoreManagementSystem',
  data() {
    return {
      searchProjectId: "2", // 默认查询项目ID 2
      projectId: '2',
      voteId: 'V001',
      projectName: '智能安防系统',
      selectedCategory: 2, // AI应用对应类别ID
      categories: [
        { id: 1, name: '科技创新' },
        { id: 2, name: 'AI应用' },
        { id: 3, name: '绿色环保' },
        { id: 4, name: '社会公益' }
      ],
      judges: [
        { id: 1, name: '陈教授', weight: 25, score: 8.8 },
        { id: 2, name: '周工程师', weight: 25, score: 8.5 },
        { id: 3, name: '吴研究员', weight: 25, score: 9.0 },
        { id: 4, name: '郑主任', weight: 25, score: 8.7 }
      ],
      // 票数数据
      inPersonVotes: 85,
      inPersonTotalVotes: 0, // 初始化由API获取
      onlineVotes: 45,
      onlineTotalVotes: 0, // 初始化由API获取
      judgeCoefficient: 60,
      inPersonVoteCoefficient: 20,
      onlineVoteCoefficient: 20,
      showSuccessMessage: false,
      showErrorMessage: false,
      successMessage: '评分提交成功！',
      successType: 'success',
      successIcon: 'fas fa-check-circle',
      errorMessage: '',
      submitting: false,
      showJudgeModal: false,
      isEditing: false,
      currentJudgeIndex: -1,
      currentJudge: {
        id: 0,
        name: '',
        weight: 20,
        score: 8.0
      },
      nameError: '',
      weightError: '',
      scoreError: '',
      loading: false,
      projectMembers: '张三,李四,王五',
      projectDescription: '基于AI的智能安防监控系统'
    }
  },
  computed: {
    judgeAverageScore() {
      if (this.judges.length === 0) return 0;
      const total = this.judges.reduce((sum, judge) => sum + judge.score, 0);
      return total / this.judges.length;
    },
    inPersonVoteRate() {
      if (this.inPersonTotalVotes === 0) return 0;
      return (this.inPersonVotes / this.inPersonTotalVotes) * 100;
    },
    onlineVoteRate() {
      if (this.onlineTotalVotes === 0) return 0;
      return (this.onlineVotes / this.onlineTotalVotes) * 100;
    },
    voteScore() {
      // 直接计算票数综合得分（百分制）
      return (this.inPersonVoteRate * 0.5 + this.onlineVoteRate * 0.5);
    },
    coefficientTotal() {
      return this.judgeCoefficient + this.inPersonVoteCoefficient + this.onlineVoteCoefficient;
    },
    finalScore() {
      // 计算最终得分（百分制，满分100分）并取整
      const judgePart = (this.judgeAverageScore * 10) * (this.judgeCoefficient / 100);
      const voteCoefficient = this.inPersonVoteCoefficient + this.onlineVoteCoefficient;
      const votePart = this.voteScore * (voteCoefficient / 100);
      return Math.round(judgePart + votePart);
    },
    isFormValid() {
      return this.projectName && 
             this.selectedCategory !== '' && 
             this.coefficientTotal === 100 &&
             this.judges.length > 0 &&
             this.judges.every(judge => judge.score >= 0 && judge.score <= 10) &&
             this.inPersonVotes >= 0 && 
             this.inPersonTotalVotes > 0 &&
             this.onlineVotes >= 0 && 
             this.onlineTotalVotes > 0;
    }
  },
  methods: {
    loadProject() {
      if (!this.searchProjectId) {
        this.showError("请输入项目ID");
        return;
      }
      
      this.loading = true;
      
      // 先获取项目基本信息
      getAllProject().then(response => {
        if (response.code === 200) {
          const projectData = response.data.find(item => item.projectId === this.searchProjectId);
          if (projectData) {
            this.projectId = projectData.projectId;
            this.voteId = projectData.voteId || 'V00' + projectData.projectId;
            this.projectName = projectData.name || '未命名项目';
            this.selectedCategory = 2;
            this.judges = [
              { id: 1, name: '默认评委1', weight: 20, score: 8.0 },
              { id: 2, name: '默认评委2', weight: 20, score: 8.0 },
              { id: 3, name: '默认评委3', weight: 20, score: 8.0 },
              { id: 4, name: '默认评委4', weight: 20, score: 8.0 },
              { id: 5, name: '默认评委5', weight: 20, score: 8.0 }
            ];
            this.inPersonVotes = projectData.totalVotes  || 100;
            this.onlineVotes = projectData.totalInsideVotes || 100;
            this.projectMembers = projectData.projectMember || '';
            this.projectDescription = projectData.description || '';
            
            if (projectData.score) {
              this.judges = this.judges.map(judge => {
                judge.score = projectData.score / 10;
                return judge;
              });
            }
            
            // 调用API获取场内和场外总票数
            return this.fetchVoteData();
          } else {
            throw new Error("未找到项目信息");
          }
        } else {
          throw new Error("加载项目信息失败");
        }
      }).then(() => {
        this.showSuccess("项目信息加载成功");
      }).catch(error => {
        this.showError(error.message || "加载项目信息失败");
        console.error(error);
      }).finally(() => {
        this.loading = false;
      });
    },
    // 获取票数数据的方法
    fetchVoteData() {
      if (!this.voteId) {
        throw new Error("投票ID不存在");
      }
      
      // 定义获取场内票数的Promise
      const inPersonPromise = getAllVote({ voteId: this.voteId }).then(response => {
        if (response.code === 200) {
          // 根据API返回格式获取总票数（假设data字段直接返回数值）
          this.inPersonTotalVotes = response.data || 200;
        } else {
          throw new Error("获取场内票数失败");
        }
      }).catch(error => {
        console.error("获取场内票数失败:", error);
        this.showError("获取场内票数失败，使用默认值");
        this.inPersonTotalVotes = 200; // 设置默认值
      });
      
      // 定义获取场外票数的Promise
      const onlinePromise = getAllVoteOnline({ voteId: this.voteId }).then(response => {
        if (response.code === 200) {
          // 根据API返回格式获取总票数（假设data字段直接返回数值）
          this.onlineTotalVotes = response.data || 200;
        } else {
          throw new Error("获取场外票数失败");
        }
      }).catch(error => {
        console.error("获取场外票数失败:", error);
        this.showError("获取场外票数失败，使用默认值");
        this.onlineTotalVotes = 200; // 设置默认值
      });
      
      // 返回两个Promise的组合
      return Promise.all([inPersonPromise, onlinePromise]);
    },
    getScoreLevel(score) {
      if (score >= 9.0) return '优秀';
      if (score >= 8.0) return '良好';
      if (score >= 7.0) return '中等';
      if (score >= 6.0) return '及格';
      return '不及格';
    },
    getScoreClass(score) {
      if (score >= 9.0) return 'score-excellent';
      if (score >= 8.0) return 'score-good';
      if (score >= 7.0) return 'score-medium';
      if (score >= 6.0) return 'score-pass';
      return 'score-fail';
    },
    getRankEstimation(score) {
      if (score >= 95) return '⭐ 顶级项目 (Top 5%)';
      if (score >= 90) return '✨ 优秀项目 (Top 10%)';
      if (score >= 80) return '👍 良好项目 (Top 25%)';
      if (score >= 70) return '💪 中等项目 (Top 50%)';
      return '📈 需要努力';
    },
    resetForm() {
      this.judges.forEach(judge => {
        judge.score = 0;
      });
      this.judgeCoefficient = 60;
      this.inPersonVoteCoefficient = 20;
      this.onlineVoteCoefficient = 20;
    },
    submitScores() {
      if (!this.isFormValid) {
        this.showError('请完成所有必填项并确保系数总和为100%');
        return;
      }
      
      this.submitting = true;
      
      const submissionData = {
        projectId: this.projectId,
        voteId: this.voteId,
        projectName: this.projectName,
        categoryId: this.selectedCategory,
        projectMembers: this.projectMembers,
        projectDescription: this.projectDescription,
        judgeScores: this.judges.map(judge => ({
          judgeId: judge.id,
          name: judge.name,
          weight: judge.weight,
          score: judge.score
        })),
        coefficients: {
          judge: this.judgeCoefficient,
          inPerson: this.inPersonVoteCoefficient,
          online: this.onlineVoteCoefficient
        },
        votes: {
          inPerson: {
            votes: this.inPersonVotes,
            total: this.inPersonTotalVotes
          },
          online: {
            votes: this.onlineVotes,
            total: this.onlineTotalVotes
          }
        },
        finalScore: this.finalScore
      };
      
      setProjectScore(submissionData)
        .then(response => {
          if (response.success) {
            this.successMessage = response.message || '评分提交成功！';
            this.successType = response.type || 'success';
            this.successIcon = this.getSuccessIcon(response.type);
            this.showSuccessMessage = true;
          } else {
            this.showError(response.message || '提交评分失败');
          }
        })
        .catch(error => { 
          console.error('提交评分失败:', error);
          this.showError('提交评分失败，请重试');
        })
        .finally(() => {
          this.submitting = false;
        });
    },
    getSuccessIcon(type) {
      switch(type) {
        case 'special': return 'fas fa-trophy';
        case 'highScore': return 'fas fa-star';
        default: return 'fas fa-check-circle';
      }
    },
    showSuccess(message) {
      this.successMessage = message;
      this.showSuccessMessage = true;
      setTimeout(() => {
        this.showSuccessMessage = false;
      }, 3000);
    },
    showError(message) {
      this.errorMessage = message;
      this.showErrorMessage = true;
      setTimeout(() => {
        this.showErrorMessage = false;
      }, 3000);
    },
    openAddJudgeModal() {
      this.isEditing = false;
      this.currentJudge = {
        id: Date.now(),
        name: '',
        weight: 20,
        score: 8.0
      };
      this.clearErrors();
      this.showJudgeModal = true;
    },
    openEditJudgeModal(index) {
      this.isEditing = true;
      this.currentJudgeIndex = index;
      this.currentJudge = {...this.judges[index]};
      this.clearErrors();
      this.showJudgeModal = true;
    },
    closeJudgeModal() {
      this.showJudgeModal = false;
      this.clearErrors();
    },
    clearErrors() {
      this.nameError = '';
      this.weightError = '';
      this.scoreError = '';
    },
    validateJudge() {
      this.clearErrors();
      let isValid = true;
      
      if (!this.currentJudge.name || this.currentJudge.name.trim() === '') {
        this.nameError = '评委姓名不能为空';
        isValid = false;
      }
      
      if (this.currentJudge.weight <= 0 || this.currentJudge.weight > 100) {
        this.weightError = '权重必须在1-100之间';
        isValid = false;
      }
      
      if (this.currentJudge.score < 0 || this.currentJudge.score > 10) {
        this.scoreError = '评分必须在0-10之间';
        isValid = false;
      }
      
      return isValid;
    },
    saveJudge() {
      if (!this.validateJudge()) return;
      
      if (this.isEditing) {
        this.judges.splice(this.currentJudgeIndex, 1, {...this.currentJudge});
      } else {
        this.judges.push({...this.currentJudge});
      }
      
      this.showJudgeModal = false;
    },
    removeJudge(index) {
      if (confirm('确定要删除此评委吗？')) {
        this.judges.splice(index, 1);
      }
    }
  },
  created() {
    this.loadProject();
  }
}
</script>
	
<style scoped>
/* 基础样式 */
.ranking-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 24px 24px 0 0;
  padding: 30px 40px;
  color: white;
  box-shadow: 0 20px 50px rgba(99, 102, 241, 0.25);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}

.header-info {
  position: relative;
  z-index: 2;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.header-text {
  display: flex;
  flex-direction: column;
}

.header-h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-p {
  font-size: 18px;
  opacity: 0.9;
}

.project-id {
  background: rgba(255, 255, 255, 0.15);
  padding: 12px 24px;
  border-radius: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  z-index: 2;
  position: relative;
  backdrop-filter: blur(5px);
}

.project-id-icon {
  margin-right: 10px;
  font-size: 16px;
}

/* 主容器 */
.container {
  background: white;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

/* 卡片样式 */
.card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 2px solid #f0f2f5;
}

.card:hover {
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1);
  transform: translateY(-6px);
}

.card-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 28px;
  color: #2d3748;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;
  justify-content: space-between;
}

.card-icon {
  margin-right: 16px;
  font-size: 24px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.add-btn-text {
  display: flex;
  align-items: center;
}

.add-btn i {
  margin-right: 10px;
  background: transparent !important;
  width: auto;
  height: auto;
  font-size: 16px;
}

/* 输入框样式 */
.input-group {
  margin-bottom: 25px;
  position: relative;
}

.input-label {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 12px;
  color: #4a5568;
  font-weight: 500;
}

.input-label i {
  margin-right: 12px;
  font-size: 18px;
  color: #718096;
}

.input-field {
  width: 100%;
  padding: 16px 24px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  font-size: 18px;
  background: #f8fafc;
  transition: all 0.3s ease;
  border-radius: 16px;
}

.input-field:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
  background: white;
}

/* 评委卡片样式 */
.judge-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.judge-item {
  padding: 24px;
  border-radius: 20px;
  background: #f9fafb;
  border: 2px solid #edf2f7;
  transition: all 0.3s ease;
  position: relative;
}

.judge-item:hover {
  border-color: #c7d2fe;
  transform: translateY(-4px);
}

.judge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.judge-name {
  font-weight: 600;
  color: #2d3748;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.judge-name i {
  margin-right: 12px;
  color: #6366f1;
}

.judge-weight {
  background: #e0e7ff;
  color: #4f46e5;
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 500;
}

.score-input-container {
  display: flex;
  align-items: center;
}

.score-badge {
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 500;
  margin-left: 16px;
  min-width: 100px;
  text-align: center;
}

.judge-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 12px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f1f5f9;
  color: #64748b;
  border: none;
}

.action-btn:hover {
  transform: scale(1.1);
}

.edit-btn:hover {
  background: #dbeafe;
  color: #3b82f6;
}

.delete-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* 投票卡片样式 */
.vote-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.vote-card {
  padding: 25px;
  border-radius: 20px;
  background: #f9fafb;
  border: 2px solid #edf2f7;
}

.vote-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.vote-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
}

.vote-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* 进度条 */
.vote-progress {
  height: 14px;
  border-radius: 8px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 20px;
}

.vote-progress-inner {
  height: 100%;
  border-radius: 8px;
  transition: width 0.6s ease;
}

/* 系数设置 */
.coefficient-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

/* 结果卡片 */
.result-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

.result-card {
  padding: 30px 25px;
  border-radius: 20px;
  background: #f8fafc;
  text-align: center;
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-10px);
}

.result-label {
  font-size: 18px;
  color: #718096;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-value {
  font-size: 42px;
  font-weight: 700;
  color: #2d3748;
  margin: 8px 0;
}

.result-weight {
  font-size: 16px;
  color: #a0aec0;
}

.final-score {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(79, 70, 229, 0.3);
  grid-column: 1 / -1;
}

.final-score::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}

.final-score .result-value {
  color: white;
  font-size: 60px;
}

.final-score .result-label {
  color: rgba(255,255,255,0.9);
}

.final-score .result-weight {
  color: rgba(255,255,255,0.8);
}

/* 按钮样式 */
.btn-group {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  justify-content: flex-end;
}

.btn {
  padding: 16px 40px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-reset {
  background: #f1f5f9;
  color: #64748b;
}

.btn-reset:hover {
  background: #e2e8f0;
  transform: translateY(-4px);
}

.btn-submit {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
}

.btn-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(79, 70, 229, 0.4);
}

.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-text {
  display: flex;
  align-items: center;
}

/* 成功提示 */
.success-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  z-index: 100;
  animation: slideUp 0.4s ease-out;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 20px 50px rgba(16, 185, 129, 0.3);
}

.success-toast.special {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.success-toast.high-score {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

@keyframes slideUp {
  0% { transform: translateX(-50%) translateY(200px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* 错误提示 */
.error-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  padding: 20px 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  z-index: 100;
  animation: slideUp 0.4s ease-out;
  box-shadow: 0 20px 50px rgba(239, 68, 68, 0.3);
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 24px;
  padding: 40px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: modalAppear 0.3s ease-out;
}

@keyframes modalAppear {
  0% { transform: translateY(60px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.modal-title {
  font-size: 24px;
  font-weight: 600;
  color: #2d3748;
}

.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.close-btn:hover {
  color: #ef4444;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 30px;
}

/* 分数颜色 */
.score-excellent { background: rgba(16, 185, 129, 0.15); color: #059669; }
.score-good { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.score-medium { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.score-pass { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
.score-fail { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

/* 加载动画 */
.loader {
  width: 30px;
  height: 30px;
  border: 4px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
  margin-right: 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 错误提示 */
.error-message {
  color: #ef4444;
  font-size: 14px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.error-message i {
  margin-right: 8px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .judge-container, .vote-container, .coefficient-container, .result-container {
    grid-template-columns: 1fr;
  }
  
  .header {
    padding: 25px;
  }
  
  .container {
    padding: 25px;
  }
  
  .card {
    padding: 25px;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
  
  .modal-content {
    width: 95%;
    padding: 25px;
  }
}

/* 查询项目区域 */
.search-section {
  background: white;
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 15px;
  align-items: center;
  border: 2px solid #f0f2f5;
}

.search-input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  background: #f8fafc;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
  background: white;
}

.search-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.search-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 加载指示器 */
.loading-indicator {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(99, 102, 241, 0.2);
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 工具类 */
.text-green-500 { color: #10b981; }
.text-red-500 { color: #ef4444; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mb-1 { margin-bottom: 4px; }
.text-sm { font-size: 14px; }
.text-gray-600 { color: #4b5563; }
.font-medium { font-weight: 500; }
.text-blue-500 { color: #3b82f6; }
.text-purple-500 { color: #8b5cf6; }
.text-yellow-400 { color: #fbbf24; }
.text-blue-400 { color: #60a5fa; }
.flex { display: flex; }
.justify-between { justify-content: space-between; }
</style>